<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/login.css">
    <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="left">
                <a href="">
                    <img src="../images/topLogo.png" alt="">
                </a>
                <span>
                    用户登录
                </span>
            </div>
            <div class="right">
                还没有账号？马上去 <a href="regeister.html">注册>></a>
            </div>
        </div>
    </div>
    <div class="loginPage">
        <div class="container clearfix">
            <div class="left">
                <img src="../images/loginBg.png" alt="">
            </div>
            <div class="right">
                <p class="quickLogin">
                    快捷登录
                </p>
                <p class="loginErrorTips">
                    账号或密码错误，请重新输入或者 <a href="findPassword.html">找回密码>></a>
                </p>
                <form action="" class="form">
                        <div class="phoneCode formText">
                            <p class="textInput">
                                <label for="userPhone"></label>
                                <input type="text" placeholder="请输入手机号码" id="userPhone">
                            </p>
                        </div>
                        <div class="passCode formText">
                            <p class="textInput">
                                <label for="userPassword"></label>
                                <input type="text" placeholder="请输入密码" id="userPassword">
                            </p>
                        </div>
                        <div class="formText messCode">
                            <p class="textInput">
                                <input type="text" placeholder="请输入验证码" id="userCode">
                                <span class="codePic"></span>
                            </p>
                        </div>
                        <div class="remberLogin">
                            <label for="remberLogin" class="remberLoginLable">
                                <input type="checkbox" id="remberLogin">
                                <label class="label"></label>
                                <span class="noselect">下次自动登录</span>
                            </label>
                        </div>
                    <div class="loginBtn">
                        <input type="button" value="登录" id="loginIn">
                    </div>
                    <div class="regeisterOper">
                        <a href="findPassword.html" class="forgetPassword">忘记密码</a>
                        <a href="regeister.html" class="regeister">立即注册</a>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <div class="footer">
        <p >
            Copyright：2018 链百科 鄂ICP证030173号
        </p>
        <p>
            武汉市代劳科技有限责任公司-链百科团队出品
        </p>
    </div>
    <script src="../layer/layer.js"></script>
    <script>
        $('.textInput input').on('focus',function () {
            if($(this).parents('.formText ').hasClass('messCode')){
                return false
            }
           $(this).parents('.textInput').addClass('focus')
        })
        $('.textInput input').on('blur',function () {
            if($(this).parents('.formText ').hasClass('messCode')){
                return false
            }
            $(this).parents('.textInput').removeClass('focus')
        })
        function checkTel(){
            var reg2 =/^(((13|14|15|16|18|17|19)\d{9}))$/;
            if( !reg2.test($('#userPhone').val()) ){
                this.telError =true
                return false;
            }
            return true
        }
        //点击登录
        $('#loginIn').on('click',function (e) {
            if(!$('#userPhone').val()){
                layer.tips('请输入手机号码', '#userPhone', {
                    tips: 2
                });
                return false
            }
            if(!checkTel()) {
                layer.tips('手机号码格式错误', '#userPhone', {
                    tips: 2
                });
                return false
            }
            if(!$('#userPassword').val()){
                layer.tips('请输入密码', '#userPassword', {
                    tips: 2
                });
                return false
            }
            if(!$('#userCode').val()){
                layer.tips('请输入验证码', '#userCode', {
                    tips: 3
                });
                return false
            }
            //模拟数据提交
            if($('#userPhone').val()=='15914089352'&&$('#userPassword').val()=='123456'){
                aleet('登录成功')
            }else{
                $('.loginErrorTips').show()
            }

        })
        //输入框聚焦 错误提示消失
        $('.form').find('input').each(function (index,ele) {
            $(ele).on('focus',function () {
                if($('.loginErrorTips').css('display')=='block'){
                    $('.loginErrorTips').hide()
                }
            })
        })


    </script>
</body>
</html>